<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车效果</title>
    <link rel="stylesheet" href="./reset.css">
    <style>
        .bigbox{
            width: 400px;
            border-radius: 10px;
            border: 1px solid rgb(247, 240, 240);
            background-color: white;
            margin: 80px auto;
        }
        .title{
            display: flex;
            justify-content: space-between;
            font-size: 18px;
            font-weight: 700;
            margin: 20px;
            
        }
        .list .item{
            width: 96%;
            background-color: white; 
            display: flex;
            border-radius: 10px;
            align-items: center;
            justify-content: space-between;
        }
        .list .item .zuo{
            display: flex;
        }
        .list .item .left img{
            width: 60px;
            height: 60px;
            border-radius: 10px;
            margin: 20px;
        }
        .list .item .middle .name{
            font-size: 16px;
            font-weight: 700;
            margin-bottom: 20px;
        }
        .list .item .middle .price{
            color: red;
            font-size: 16px;
        }
        .list .item .middle .price .ago{
            font-size: 12px;
            text-decoration: line-through;
            color: gray;
        }
        .list .item .right{
            display: flex;
        }
        .list .item .right .jian{
            display: block;
            width: 20px;
            height: 20px;
            color: blue;
            border: 1px solid blue;
            border-radius: 50%;
            margin-right: 10px;
            text-align: center;
            line-height: 20px;
        }
        .list .item .right .jia{
            display: block;
            width: 20px;
            height: 20px;
            color: white;
            background-color: blue;
            border-radius: 50%;
            margin-left: 10px;
            text-align: center;
            line-height: 20px;
        }
        .empty{
            color: red;
            text-align: center;
            margin: 50px 0;
        }
        .foot{
            height: 60px;
            background-color: rgba(105, 105, 105, 0.562);
            display: flex;
            padding: 10px 20px;
        }
        .foot img{
            width: 60px;
        }
        .foot .jiage{
            margin-left: 20px;
        }
        .foot .jiage .sum{
            color: white;
            font-size: 18px;
        }
        .foot .jiage .wenzi{
            color: white;
            font-size: 12px;
        }
        .foot .count{
            width: 80px;
            height: 40px;
            background-color: rgb(68, 208, 68);
            color: white;
            text-align: center;
            line-height: 40px;
            border-radius: 8px;
            margin-left: 110px;
        }
    </style>
</head>
<body>
        <div id="app">
            <div class="bigbox">
                <div class="title">
                    <span>已选商品</span>
                    <span @click="clear(item)">清空</span>
                </div>
                <div class="list">
                    <div class="item" v-for="(item,index) in tasklist" v-bind:key="index">
                        <div class="zuo">
                            <div class="left">
                                <img v-bind:src="item.pic" alt="">
                            </div>
                            <div class="middle">
                                <div class="name">{{ item.name }}</div>
                                <div class="price">￥{{ item.price }}
                                    <span class="ago">￥{{ item.ago }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="right">
                            <span class="jian" @click="changejian(item)">-</span>
                            <div class="num">  {{ item.num }} </div>
                            <span class="jia" @click="changejia(item)">+</span>
                        </div>
                    </div> 
                    <div class="empty" v-show="tasklist.length == 0">任务列表空空如也!</div>
                </div>
                <div class="foot">
                    <img src="./pictures/饿了么.webp" alt="">
                    <div class="jiage">
                        <div class="sum">￥{{ sum }}</div>
                        <div class="wenzi">另需配送费35元</div>
                    </div>
                    <div class="count">去结算</div>
                </div>
            </div>
        </div>
</body>
</html>
<script src="./vue-2.5.21.js"></script>
<script>
    var v = new Vue({
        el:'#app',
        data:{
            tasklist:[
                {id:'1',pic:'./pictures/秋刀鱼.jpeg',name:'秋刀鱼/斤',price:'35',ago:'36',num:'1'},
                {id:'2',pic:'./pictures/带鱼.jpeg',name:'鲜大带鱼/斤',price:'45',ago:'46',num:'1'},
                {id:'3',pic:'./pictures/皮皮虾.jpeg',name:'鲜活全母皮皮虾/斤',price:'85',ago:'86',num:'1'}
            ]
        },
        computed: {
            sum(){
                var n = this.tasklist.reduce((prev,item)=>{
                   return prev + item.price * item.num
                },0)
                return n
            }
        } , //computed 定义计算属性
        watch: {} , //watch 定义数据监听
        methods: {
            changejian(item){
                if(item.num > 1){
                   item.num--;
                }  
            },
            changejia(item){
                if(item.num < 5){
                    item.num++;
                }  
            },
            clear(item){
                this.tasklist = []
            }
        } , //methods 定义方法(函数)
        filters: {} , //filters 定义过滤器
        directives: {} , //directives 定义自定义指令
        components: {} , //components 注册局部组件
    })
</script>